<template>
  <van-action-sheet
    v-model:show="actionSheetVisible"
    teleport="body"
    :close-on-click-overlay="false"
  >
    <section class="action-sheet-content">
      <section class="header-wrap">
        <section class="header-wrap__left" />
        <section class="header-wrap__center">
          {{ title }}
        </section>
        <section class="header-wrap__right">
          <base-svg-icon
            class="close-icon"
            icon-class="icon-close"
            @click="handleClose"
          />
        </section>
      </section>

      <slot />
    </section>
    <section
      v-if="showCancelButton || showConfirmButton"
      class="footer-wrap"
    >
      <van-button
        v-if="showCancelButton"
        round
        @click="handleClose"
      >
        {{ cancelButtonText }}
      </van-button>

      <van-button
        v-if="showConfirmButton"
        round
        type="primary"
        @click="handleConfirm"
      >
        {{ confirmButtonText }}
      </van-button>
    </section>
  </van-action-sheet>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const emits = defineEmits(['update:visible', 'confirm', 'cancel']);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '标题',
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
  confirmButtonText: {
    type: String,
    default: '确定',
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  cancelButtonText: {
    type: String,
    default: '取消',
  },
});

const actionSheetVisible = ref(false);

watch(
  () => props.visible,
  (val) => {
    actionSheetVisible.value = val;
  },
  {
    immediate: true,
  }
);

const handleClose = () => {
  emits('update:visible', false);
  actionSheetVisible.value = false;
  emits('cancel');
};

const handleConfirm = () => {
  emits('confirm');
};
</script>

<style lang="scss" scoped>
.footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 10px 11px;
  background-color: var(--#{$ns}-color-white);
  border-top: 1px solid var(--#{$ns}-color-white);

  :deep(.van-button) {
    flex: 1;
  }
}

.action-sheet-content {
  .header-wrap {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--#{$ns}-space-size-large);
    margin-top: var(--#{$ns}-space-size-large);

    .header-wrap__center {
      display: flex;
      flex: 1;
      justify-content: center;
      font-size: var(--#{$ns}-font-size-extra-large);
      font-weight: 600;
      line-height: normal;
      color: var(--#{$ns}-text-color-primary);
    }

    .header-wrap__right {
      display: flex;
      align-items: center;
      justify-content: center;

      .close-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
